<template>
    <div :class="[userId ? '' :'app-container']">
        <header-title v-if="!userId"/>
        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-if="!userId">

            <el-form-item label="订单号" prop="orderNo">
                <el-input
                    v-model="queryParams.orderNo"
                    placeholder="请输入订单号"
                    clearable
                    @keyup.enter.native="handleQuery"
                />
            </el-form-item>
           
            <el-form-item label="机构" prop="orgId">
                <el-select v-model="queryParams.orgId" placeholder="机构列表" clearable>
                    <el-option
                        v-for="dict in organList"
                        :key="dict.id"
                        :label="dict.orgName"
                        :value="dict.id"
                    />
                </el-select>
            </el-form-item>
            <el-form-item  label="渠道名称" prop="channelId">
                <el-select clearable v-model="queryParams.channelId">
                    <el-option
                        v-for="(item,index) in channelList"
                        :key="item.id"
                        :label="item.channelName" 
                        :value="item.id"
                    ></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="业务员" prop="sysUserId">
                <el-select v-model="queryParams.sysUserId" placeholder="业务员" clearable>
                    <el-option
                        v-for="dict in userList"
                        :key="dict.userId"
                        :label="dict.nickName"
                        :value="dict.userId"
                    />
                </el-select>
                
                    <!-- <el-input
                        v-model="queryParams.sysRealName"
                        placeholder="请输入业务员"
                        clearable
                        @keyup.enter.native="handleQuery"
                    /> -->
            </el-form-item>

            <el-form-item label="推送状态" prop="matchStatus">
                <el-select v-model="queryParams.matchStatus" placeholder="推送状态" clearable>
                    <el-option label="推送入库失败" value="1"></el-option>
                    <el-option label="推送入库成功" value="2"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="推送日期" prop="jiTime">
                <el-date-picker
                    v-model="rangeTime"
                    type="daterange"
                    value-format="yyyy-MM-dd"
                    @keyup.enter.native="handleQuery"
                    placeholder="选择时间">
                </el-date-picker>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            </el-form-item>
        </el-form>
        <el-table
            v-loading="loading"
            :data="dataList"
          
        >   
        <!-- 用户编号，用户手机号，客户来源，标签结果（投放规则填写的字段）、所在城市，申请/推送产品，
            匹配率（根据投放规则计算100%），结算费用，推送时间，推送状态（成功、失败，其实就是撞库的概念） -->
            <el-table-column prop="orderNo" label="订单号"></el-table-column>
            <el-table-column prop="realChannelName" label="渠道来源">
                
            </el-table-column>
            
            <el-table-column label="姓名/手机号">
                <template slot-scope="scope">
                    {{ scope.row.name }}/{{ scope.row.phone }}
                </template>
            </el-table-column>
            <el-table-column  label=" 推广计划/推广机构名称">
                <template slot-scope="scope">
                    {{scope.row.planName}}/{{ scope.row.orgName  }}
                </template>
            </el-table-column>
            <!-- todo -->
            <el-table-column prop="realName" label="业务经理"></el-table-column>
            <el-table-column prop="inNum" label="已选资质">
                <template slot-scope="scope">
                    {{getTotalNum(scope.row)}}
                </template>
            </el-table-column>
              
            <el-table-column prop="cityName" label="所在城市">
                <template slot-scope="scope">
                    {{ scope.row.provinceName }}-{{ scope.row.cityName }}
                </template>
            </el-table-column>
            <el-table-column  label="结算类型" width="150">
                <template slot-scope="scope">
                    <span v-if="scope.row.balanceType == 1">cpa结算</span>
                    <div v-if="scope.row.balanceType == 2">
                        <div>cps结算</div>
                        <div v-if="scope.row.fundAmount">{{ scope.row.fundAmount }}</div>
                        <div>
                            <span class="color-red" v-if="scope.row.fundStatus == '0'">未放款</span>
                            <span class="color-green" v-if="scope.row.fundStatus == '1'">已放款</span>
                            <span class="color-gray" v-if="scope.row.fundStatus == '2'">已终止</span>
                        </div>
                        <div v-if="scope.row.fundTime">{{ scope.row.fundTime }}</div>
                    </div>
                    
                </template>
            </el-table-column>
            <!-- <el-table-column prop="fundAmount" label="放款金额">
                <template slot-scope="scope">
                    <span v-if="scope.row.balanceType == 2"></span>
                    <span v-else>-</span>
                </template>
            </el-table-column>
            <el-table-column prop="fundAmount" label="放款状态">
                <template slot-scope="scope">
                    <div v-if="scope.row.balanceType == 2"> 
                       
                    </div>
                    <div v-else>-</div>
                </template>
            </el-table-column>
            <el-table-column prop="fundAmount" label="放款时间">
                <template slot-scope="scope">
                    <span v-if="scope.row.balanceType == 2">{{ scope.row.fundTime }}</span>
                    <span v-else>-</span>
                </template>
            </el-table-column> -->
            <el-table-column prop="matchTime" label="推送时间"></el-table-column>
                
            <el-table-column label="推送状态" >
                <template slot-scope="scope">
                    <div class="color-red" v-if="scope.row.matchStatus == 1">推送入库失败</div>
                    <div class="fail-text" v-if="scope.row.matchStatus == 1">原因：{{  scope.row.matchReason }}</div>
                    <span class="color-green" v-if="scope.row.matchStatus == 2">推送入库成功</span>
                </template>
            </el-table-column>
            <el-table-column  label="操作" width="100">
                <template slot-scope="scope">
                    <el-button
                        size="mini"
                        type="primary"
                        v-hasPermi="['order:list:detail']"
                        @click="handleUpdate(scope.row)"
                    >查看详情</el-button>
                    <!-- <el-button
                        size="mini"
                        type="text"
                        icon="el-icon-document"
                        @click="lookAgreement(scope.row)"
                    >授权协议</el-button> -->
                </template>
            </el-table-column>
        </el-table>
        <pagination
            :total="total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="getList"
        />
        <el-drawer
            title="订单详情"
            :visible.sync="showDrawer"
            :direction="direction"
            :before-close="handleClose"
            :append-to-body="true"
            size="900px"
        >
            <orderDetail :detail="orderDetail"></orderDetail>
        </el-drawer>
        <!-- <el-drawer
            title="个人授权协议"
            :visible.sync="showAgreement"
            :direction="direction"
            :before-close="handleClose"
            :append-to-body="true"
            size="600px"
        >
            <agreement :data="agreeMent"></agreement>
        </el-drawer> -->
        
    </div>
</template>
<script>
    import {selectOrderList,getOrderDetail,listOrgan} from '@/api/organization/organ'
     import {listChannel} from '@/api/channel/channel'
    import { listUser} from "@/api/system/user";
    import orderDetail from '../handle/orderDetail.vue';
    // import agreement from './agreement.vue';
   
    export default{
        components:  {
            orderDetail,
            // agreement
        },
        props: {
            userId: {
                type: String,
                default:''
            }
        },
        data() {
            return {
                isShow:false,
                queryParams: {
                    pageNum: 1,
                    pageSize: 10,
                    matchStatus: '',
                    orgId: '',
                    endTime: '',
                    orderNo: '',
                    startTime: '',
                    userId:'',
                    sysUserId: '',
                    channelId: ''
                },
                loading: true,
                channelList: [],
                dataList: [],
                total: 0,
                organParams: {
                    pageNum: '1',
                    pageSize: '100000',
                },
                organList: [],
                orderDetail: {},
                showDrawer: false,
                direction: 'rtl',
                rangeTime:[],
                userList: [],
                agreeMent:'',
                showAgreement: false,
                 
               
            }
        },
        created() {
            this.getOrganList()
            this.getChannelList()
            this.getUserList()
            this.getList();
        },
        methods: {
            getChannelList() {
                listChannel({pageSize: 100000,pageNum: 1}).then( res => {
                    this.channelList = this.handleTree(res.data.records, "");
                })
            },
            getTotalNum(row) {
                let total  = 0
                if(row.isCar == 1){
                    total++
                }
                if(row.isHouse == 1){
                    total++
                }
                if(row.isFund == 1) {
                    total++
                }
                if(row.isLicense == 1){
                    total++
                }
                if(row.isSocial == 1){
                    total++
                }
                if(row.isClockSalary == 1){
                    total++
                }
                if(row.isWarranty == 1){
                    total++
                }
                if(row.isLocal == 1){
                    total++
                }
                if(row.sesameCode > 0){
                    total++
                }
                return total
                
            },
            getUserList() {
                listUser({ pageNum: 1, pageSize: 100000,}).then(response => {
                    this.userList = response.rows;
                   
                    }
                );
            },
            getOrganList() {
               
                listOrgan(this.organParams).then(res => {
                    this.organList = this.handleTree(res.data.records, "");
                })
            },
            getList() {
                this.loading = true;
                if(this.rangeTime.length > 0){
                    this.queryParams.startTime = this.rangeTime[0]
                    this.queryParams.endTime = this.rangeTime[1]
                }else{
                    this.queryParams.startTime = ''
                    this.queryParams.endTime = ''
                }
                if(this.userId) {this.queryParams.userId = this.userId}
                else{this.queryParams.userId = ''}
                selectOrderList(this.queryParams).then(response => {
                    this.dataList = this.handleTree(response.data.records, "orgId");
                    this.total = response.data.total
                    this.loading = false;
                });
            },
            handleQuery() {
                this.getList()
            },
            resetQuery() {
                this.resetForm("queryForm");
                this.rangeTime = []
                this.handleQuery();
            },
            handleUpdate(item) {
                getOrderDetail({id: item.id}).then(res => {
                    this.showDrawer = true
                    this.orderDetail = res.data
                })
            },
            handleClose() {
                this.showDrawer = false
            },
           
        }
    }
</script>
<style>
    .color-green{
        color: green;
    }
    .color-red{
        color: red;
    }
    .color-gray{
        color: gray;
    }
    .fail-text{
        font-size: 12px;
        color: gray;
    }
</style>
